<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏论坛</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f4f4f4;
        }

        .header {
            background-color: #2196F3;
            color: white;
            padding: 10px 0;
            text-align: center;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .search-bar {
            display: flex;
            margin: 20px 0;
        }

        .search-bar input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }

        .search-bar button {
            padding: 10px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        .categories {
            display: flex;
            flex-wrap: wrap;
            margin: 20px 0;
        }

        .category {
            background-color: white;
            border-radius: 4px;
            padding: 10px;
            margin: 10px;
            width: calc(25% - 20px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .category h3 {
            color: #2196F3;
            margin-bottom: 10px;
        }

        .category ul {
            list-style: none;
        }

        .category li {
            margin: 5px 0;
        }

        .posts {
            display: flex;
            flex-wrap: wrap;
            margin: 20px 0;
        }

        .post {
            background-color: white;
            border-radius: 4px;
            padding: 15px;
            margin: 10px;
            width: calc(33.33% - 20px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .post-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .post-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .post-author {
            font-weight: bold;
        }

        .post-time {
            color: #888;
            font-size: 12px;
            margin-left: auto;
        }

        .post-title {
            font-size: 18px;
            margin-bottom: 10px;
            color: #333;
        }

        .post-content {
            color: #666;
            margin-bottom: 10px;
        }

        .post-footer {
            display: flex;
            justify-content: space-between;
            color: #888;
            font-size: 12px;
        }

        .load-more {
            text-align: center;
            margin: 20px 0;
        }

        .load-more button {
            padding: 10px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            margin-top: 20px;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>游戏论坛</h1>
</div>

<div class="container">
    <div class="search-bar">
        <input type="text" placeholder="搜索帖子...">
        <button>搜索</button>
    </div>

    <div class="categories">
        <div class="category">
            <h3>娱乐明星</h3>
            <ul>
                <li>明星</li>
                <li>粉丝组织</li>
                <li>网络红人</li>
            </ul>
        </div>
        <div class="category">
            <h3>体育</h3>
            <ul>
                <li>足球</li>
                <li>篮球</li>
                <li>NBA</li>
            </ul>
        </div>
        <div class="category">
            <h3>游戏</h3>
            <ul>
                <li>手机游戏</li>
                <li>网络游戏</li>
                <li>电子竞技</li>
            </ul>
        </div>
        <div class="category">
            <h3>动漫宅</h3>
            <ul>
                <li>日本动漫</li>
                <li>国产动漫</li>
                <li>欧美动漫</li>
            </ul>
        </div>
    </div>

    <div class="posts" id="posts-container">
        <!-- 帖子内容将通过JavaScript动态加载 -->
        <div class="loading" id="loading">加载中...</div>
    </div>

    <div class="load-more">
        <button id="load-more-btn">加载更多</button>
    </div>
</div>

<div class="footer">
    <p>© 2025 Nuyoah 版权所有</p>
</div>

<script>
    // 获取帖子数据
    async function fetchPosts() {
        try {
            const response = await fetch('http://localhost:8001/api/posts');
            if (!response.ok) {
                throw new Error('网络响应失败');
            }
            return await response.json();
        } catch (error) {
            console.error('获取帖子数据失败:', error);
            return [];
        }
    }

    // 渲染帖子
    function renderPosts(posts) {
        const postsContainer = document.getElementById('posts-container');
        const loadingElement = document.getElementById('loading');
        loadingElement.classList.add('hidden');

        if (posts.length === 0) {
            postsContainer.innerHTML = '<p>没有找到帖子</p>';
            return;
        }

        postsContainer.innerHTML = '';
        posts.forEach(post => {
            const postElement = document.createElement('div');
            postElement.className = 'post';

            // 格式化日期
            const createdAt = new Date(post.created_at);
            const formattedDate = `${createdAt.getFullYear()}-${String(createdAt.getMonth() + 1).padStart(2, '0')}-${String(createdAt.getDate()).padStart(2, '0')} ${String(createdAt.getHours()).padStart(2, '0')}:${String(createdAt.getMinutes()).padStart(2, '0')}`;

            postElement.innerHTML = `
                    <div class="post-header">
                        <img src="https://via.placeholder.com/40" alt="头像" class="post-avatar">
                        <span class="post-author">${post.user.username}</span>
                        <span class="post-time">${formattedDate}</span>
                    </div>
                    <h3 class="post-title">${post.title}</h3>
                    <p class="post-content">${post.content}</p>
                    <div class="post-footer">
                        <span>浏览: ${Math.floor(Math.random() * 1000) + 100}</span>
                        <span>回复: ${Math.floor(Math.random() * 100) + 10}</span>
                        <span><a href="#">查看详情</a></span>
                    </div>
                `;
            postsContainer.appendChild(postElement);
        });
    }

    // 初始加载帖子
    async function init() {
        const posts = await fetchPosts();
        renderPosts(posts);
    }

    // 加载更多帖子
    document.getElementById('load-more-btn').addEventListener('click', async function() {
        const loadingElement = document.getElementById('loading');
        loadingElement.classList.remove('hidden');

        // 模拟加载更多帖子
        const morePosts = await fetchPosts();
        const existingPosts = Array.from(document.querySelectorAll('.post')).map(post => {
            const titleElement = post.querySelector('.post-title');
            return titleElement.textContent;
        });

        // 过滤掉已有的帖子
        const newPosts = morePosts.filter(post => !existingPosts.includes(post.title));

        // 渲染新帖子
        renderPosts(newPosts);
    });

    // 页面加载完成后初始化
    window.addEventListener('load', init);
</script>
</body>
</html>